<template>
  <div class="company-identify">
    <div class="page full">
      <div class="top flex">
        <div class="search-box flex">
          <el-input
            v-model="pagination.searchKey"
            placeholder="支持名称模糊搜索"
            class="my-input"
            @keyup.enter="search"
          >
            <template #append>
              <ElButton @click="search">搜索</ElButton>
            </template>
          </el-input>
          <ElButton @click="resetSearch">重置</ElButton>
        </div>
      </div>
      <div class="center">
        <ElTable
          :data="tableData"
          :max-height="tableHeight"
          class="my-table"
          @select="select"
          @select-all="selectAll"
        >
          <ElTableColumn
            type="selection"
            width="55"
            :selectable="selectable" 
          ></ElTableColumn>
          <ElTableColumn label="企业ID" prop="id"></ElTableColumn>
          <ElTableColumn
            label="企业全称"
            prop="enterpriseName"
            show-overflow-tooltip
          ></ElTableColumn>
          <ElTableColumn
            label="英文全称"
            prop="enterpriseNameEn"
            show-overflow-tooltip
          ></ElTableColumn>
          <ElTableColumn
            label="企业地址"
            prop="address"
            show-overflow-tooltip
          ></ElTableColumn>
          <ElTableColumn label="审核状态" prop="status">
            <template #default="{ row }">
              {{ statusTransfer(row.status) }}
            </template>
          </ElTableColumn>
          <ElTableColumn label="提交时间" prop="createTime"></ElTableColumn>
          <ElTableColumn label="操作" width="120">
            <template #default="{ row }">
              <ElButton
                type="primary"
                link
                @click="handleAudit(row)"
                v-if="row.status == 0"
                >审核</ElButton
              >
              <ElButton type="danger" link @click="handleCheck(row)"
                >查看</ElButton
              >
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div class="bottom flex">
        <div class="select-box flex">
          <span class="select-text">已选择{{ batchAuditList.length }}项</span>
          <el-popover
            placement="top-start"
            :width="80"
            trigger="click"
            popper-class="poperover-zr"
          >
            <template #reference>
              <ElButton :disabled="batchAuditList.length === 0">审核</ElButton>
            </template>
            <template #default>
              <el-button type="primary" @click="handleBatchAudit"
                >通过</el-button
              >
              <div style="margin-top: 10px">
                <el-button type="danger" @click="noPass">驳回</el-button>
              </div>
            </template>
          </el-popover>
        </div>
        <div class="pagination-box">
          <ElPagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            background
            :total="pagination.total"
            @change="paginationChange"
          ></ElPagination>
        </div>
      </div>
    </div>
    <auditPage
      ref="auditPageRef"
      :id="detailId"
      @openRejectPage="openRejectPage"
      @auditSuccess="auditSuccess"
    ></auditPage>
    <rejectComp
      ref="rejectCompRef"
      @rejectSuccess="rejectSuccess"
      :ids="rejectIds"
    ></rejectComp>
  </div>
</template>

<script setup lang="ts">
import { statusTransfer } from "./status";
import auditPage from "./auditPage.vue";
import rejectComp from "./reject.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData: any = ref([]);
const batchAuditList: any = ref([]);
const tableHeight = ref(400);
const pagination: any = ref({
  current: 1,
  size: 10,
  total: 0,
  type: 0,
  searchKey: "",
});
const auditPageRef: any = ref(null);
const detailId: any = ref("");
const rejectCompRef: any = ref(null);
const rejectIds: any = ref([]);

// 搜索
function search() {
  pagination.value.current = 1;
  getAuthList();
}

// 重置搜索
function resetSearch() {
  pagination.value.searchKey = "";
  pagination.value.current = 1;
  getAuthList();
}

// 获取列表
async function getAuthList() {
  try {
    const result: any = await MyService.account.getAuthList1(pagination.value);
    if (result.code == 200) {
      tableData.value = result.data.records;
      pagination.value.total = result.data.total;
      pagination.value.current = result.data.current;
    } else {
      ElMessage.error({ message: "获取企业认证审核列表失败!" });
    }
  } catch (e) {}
}

const select = (selection: any[], _row: any) => {
  batchAuditList.value = selection;
};

const selectAll = (selection: any[]) => {
  batchAuditList.value = selection;
};

const selectable = (row: any) => {
  return row.status === 0
}
// 审核
function handleAudit(row: any) {
  detailId.value = row.id;
  auditPageRef.value.open("", "", row.id);
}

// 批量审核
const handleBatchAudit = async () => {
  try {
    await ElMessageBox.confirm("批量审核选中的企业？", "操作提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    });
    const res = await MyService.account.companyAuth({
      status: 1,
      ids: batchAuditList.value.map((_: any) => _.id),
    });
    if (res.code === 200) {
      ElMessage.success({ message: res.msg });
      batchAuditList.value = [];
      pagination.value.current = 1;
      getAuthList();
    } else {
      ElMessage.error({ message: "批量审核企业失败" });
    }
  } catch (error) {}
};

// 查看
function handleCheck(row: any) {
  auditPageRef.value.open("look", false, row.id);
}

// 驳回
function noPass() {
  rejectIds.value = batchAuditList.value.map((_: any) => _.id);
  rejectCompRef.value.open();
}

// 打开驳回页面
function openRejectPage() {
  rejectIds.value = [detailId.value];
  rejectCompRef.value.open();
}

// 驳回成功
function rejectSuccess() {
  pagination.value.current = 1;
  batchAuditList.value = [];
  getAuthList();
}

function auditSuccess() {
  pagination.value.current = 1;
  getAuthList();
}

// 页码改变
function paginationChange(val: any) {
  pagination.value.current = val;
  getAuthList();
}

onBeforeMount(() => {
  tableHeight.value = document.body.scrollHeight - 256;
});
onMounted(() => {
  getAuthList();
});
</script>

<style scoped>
.top {
  height: 32px;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.search-box {
  height: 100%;
  gap: 12px;
}

.center {
  max-height: calc(100% - 96px);
}

.bottom {
  height: 32px;
  justify-content: space-between;
  margin-top: 16px;
}

.select-box {
  height: 100%;
  padding-left: 13px;
  align-items: center;
  gap: 12px;
}

.select-text {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.my-input {
  width: 320px;
}
</style>
